<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>css 边框</title>
    <link rel="stylesheet" href="./index.css">
    <script src="https://kit.fontawesome.com/yourcode.js"></script>
    <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">

</head>

<body>
    <!-- 上午5h 下午4h -->
    <!-- 6-7 -->
    <h1>轮廓 40min</h1>
    <p>轮廓也需要先设置outline-style属性</p>
    <p id="lunkuo1">1</p>
    <p id="lunkuo2">2</p>
    <p id="lunkuo3">3</p>
    <p id="lunkuo4">4</p>
    <p id="lkreverse">颜色反转，无论在什么情况下都可以确保轮廓是可见的</p>
    <p id="lksimple">outline</p>
    <p id="outline-offset">外轮廓</p>
    <p id="outline-offset2">外轮廓</p>

    <h1>文本</h1>
    <p id="text1">标题 2（左对齐）</p>

    <div id="text2">
        In my younger and more vulnerable years my father gave me some advice that I've been turning over in my mind
        ever since. 'Whenever you feel like criticizing anyone,' he told me, 'just remember that all the people in this
        world haven't had the advantages that you've had.'
    </div>
    <a href="http://www.baidu.com" id="text3">点击一下</a>

    <!-- 7-8 -->
    <h1>字体</h1>
    <p id="font">字体</p>

    <h1>图标</h1>
    <p>有样式的 Bootstrap 图标（尺寸和颜色）：</p>
    <i class="glyphico glyphicon-cloud"></i>
    <i class="glyphico glyphicon-thumbs-up"></i>
    <h1>链接</h1>
    <a href="http://www.baidu.com" id="link">点击一下</a>
    <a href="http://www.baidu.com" id="link2" target="_blank">这是一个链接</a>

    <!-- 8-9休息 -->

    <!-- 9-10 -->
    <h1>列表</h1>
    <ul class="a">
        <li>Coffee</li>
        <li>Tea</li>
        <li>Coca Cola</li>
    </ul>

    <ul class="b">
        <li>咖啡-用烘焙过的咖啡豆制成的冲泡饮料，烘焙过的咖啡豆是来自咖啡植物的浆果的种子</li>
        <li>茶-一种芳香饮料，通常通过将热水或沸水倒在茶树的固化叶子上而制得，茶树是一种原产于亚洲的常绿灌木（灌木）</li>
        <li>可口可乐-由可口可乐公司生产的碳酸软饮料。该饮料的名称指的是其两种原始成分，即可乐果（一种咖啡因）和古柯叶。</li>
    </ul>

    <p>左边框为红色的列表：</p>
    <ul class="c">
        <li>Coffee</li>
        <li>Tea</li>
        <li>Coca Cola</li>
    </ul>
    <p>全宽的带边框的列表：</p>
    <ul class="d">
        <li>Coffee</li>
        <li>Tea</li>
        <li>Coca Cola</li>
    </ul>


    <h1>表格</h1>

    <table id="customers">
        <caption>表格1-1</caption>
        <tr>
            <th>Company</th>
            <th>Contact</th>
            <th>Address</th>
            <th>City</th>
        </tr>
        <tr>
            <td>Alibaba</td>
            <td>Ma Yun</td>
            <td>No. 699, Wangshang Road, Binjiang District</td>
            <td>Hangzhou</td>
        </tr>
        <tr>
            <td>APPLE</td>
            <td>Tim Cook</td>
            <td>1 Infinite Loop Cupertino, CA 95014</td>
            <td>Cupertino</td>
        </tr>
        <tr>
            <td>BAIDU</td>
            <td>Li YanHong</td>
            <td>Lixiang guoji dasha,No 58, beisihuanxilu</td>
            <td>Beijing</td>
        </tr>
        <tr>
            <td>Canon</td>
            <td>Tsuneji Uchida</td>
            <td>One Canon Plaza Lake Success, NY 11042</td>
            <td>New York</td>
        </tr>
        <tr>
            <td>Google</td>
            <td>Larry Page</td>
            <td>1600 Amphitheatre Parkway Mountain View, CA 94043</td>
            <td>Mountain View</td>
        </tr>
        <tr>
            <td>HUAWEI</td>
            <td>Ren Zhengfei</td>
            <td>Putian Huawei Base, Longgang District</td>
            <td>Shenzhen</td>
        </tr>
        <tr>
            <td>Microsoft</td>
            <td>Bill Gates</td>
            <td>15700 NE 39th St Redmond, WA 98052</td>
            <td>Redmond</td>
        </tr>
        <tr>
            <td>Nokia</td>
            <td>Olli-Pekka Kallasvuo</td>
            <td>P.O. Box 226, FIN-00045 Nokia Group</td>
            <td>Helsinki</td>
        </tr>
        <tr>
            <td>SONY</td>
            <td>Kazuo Hirai</td>
            <td>Park Ridge, NJ 07656</td>
            <td>Park Ridge</td>
        </tr>
        <tr>
            <td>Tencent</td>
            <td>Ma Huateng</td>
            <td>Tencent Building, High-tech Park, Nanshan District</td>
            <td>Shenzhen</td>
        </tr>
    </table>

    <!-- 10-11 -->
    <h1>中级教程</h1>
    <h1>display max-width </h1>
    <!-- <div class="imgbox" id="imgbox1">Box 1<br>
        <img src="../images//绿草茵茵.jpg" alt="Box 1" style="width:100%">
        <button onclick="removeElement()">删除</button>
    </div>

    <div class="imgbox" id="imgbox2">Box 2<br>
        <img src="../images/绿草茵茵.jpg" alt="Box 2" style="width:100%">
        <button onclick="changeVisibility()">隐藏</button>
    </div>

    <div class="imgbox">Box 3<br>
        <img src="../images/绿草茵茵.jpg" alt="Box 3" style="width:100%">
        <button onclick="resetElement()">重置所有</button>
    </div> -->


    <div class="ex1">这个 div 元素的宽度是：500px;</div>
    <br>

    <div class="ex2">这个 div 元素的最大宽度是：500px;</div>
    <p><img src="../images/绿草茵茵.jpg" alt="天空" id="clip" width="100px" height="100px"></p>
    <h1>定位 溢出 浮动 清除浮动</h1>
    <div id="overflowTest">This text is really long and the height of its container is only 100 pixels. Therefore, a
        scrollbar is added to help the reader to scroll the content. Shanghai is one of the four direct-administered
        municipalities of the People's Republic of China. Welcome to Shanghai! The city is located on the southern
        estuary of the Yangtze, with the Huangpu River flowing through it. Duis autem vel eum iriure dolor in hendrerit
        in vulputate velit esse molestie consequat, vel illum dolore eu feugiat nulla facilisis at vero eros et accumsan
        et iusto odio dignissim qui blandit praesent luptatum zzril delenit augue duis dolore te feugait nulla facilisi.
        Nam liber tempor cum soluta nobis eleifend option congue nihil imperdiet doming id quod mazim placerat facer
        possim assum. Typi non habent claritatem insitam; est usus legentis in iis qui facit eorum claritatem.
    </div>
    <p>float浮动</p>
    <h1>不使用 clear</h1>
    <div class="div1">div1</div>
    <div class="div2">div2 - 请注意，在 HTML 代码中 div2 在 div1 之后。不过，由于 div1 向左浮动，div2 中的文本会流动到 div1 周围。</div>
    <br><br>

    <h1>使用 clear</h1>
    <div class="div3">div3</div>
    <div class="div4">div4 - 在此处，clear: left; 把 div4 移动到浮动的 div3 下方。值 "left" 会清除向左浮动的元素。您也可以清除 "right" 和 "both"。</div>

    <p style="clear:right">请为包含元素添加 clearfix hack，以解决此问题：</p>

    <div class="clearfix">
        <h1><strong> Clearfix</strong></h1>
        <img class="img2" src="../images/绿草茵茵.jpg" alt="W3School" width="180" height="167">
        Lorem ipsum dolor sit amet, consectetur adipiscing elit. Phasellus imperdiet, nulla et dictum interdum...
    </div>

    <div class="clearfix2">
        <div class="box" style="background-color:#bbb">
            <p>框中的一些文本。</p>
        </div>
        <div class="box" style="background-color:#ccc">
            <p>框中的一些文本。</p>
        </div>
        <div class="box" style="background-color:#ddd">
            <p>框中的一些文本。</p>
        </div>
    </div>



    <ul id="float-daohang">
        <li><a href="#home" class="active">Home</a></li>
        <li><a href="#news">News</a></li>
        <li><a href="#contact">Contact</a></li>
        <li><a href="#about">About</a></li>
    </ul>
</body>

</html>